前言

今天將從前篇介紹的模組做延伸，繼續稍微深入研究模組的一些眉眉角角。
在我們前篇有提到一個重點，不曉得大家是否記得呢？
在模組中，state預設為模組區域變數，而actions/mutations/getters預設為全域變數
那如果今天我們想要把 actions/mutations/getters 改成區域變數，可以嗎？可以唷！

來做個帶命名的空間模組吧！

什麼是帶命名的空間模組呢？就是把 actions/mutations/getters 改成模組內區域變數，本來可以全域使用的 actions 就會變成A模組底下的 actions 囉！為什麼要這樣做呢？

試想今天我們要統計次數（Count），不太可能只有一個 Count 需要統計吧？
如果今天是需要統計點擊次數，又需要統計購買次數呢？
那就可能會在兩個模組的 mutations 中都有 updateCount ，這樣重複命名不就頭大了，所以需要將模組變成帶命名的空間模組，避免此尷尬狀況發生，也讓模組具有更高的封裝度和複用性。

• 要怎麼變成帶命名的空間模組呢？
  非常簡單，只要在模組中加入這段就可以囉！

export default {
  namespaced: true,
}

• 要怎麼在Vue元件中使用呢？
  因為目前模組已經被放在帶命名之下了哦，直接呼叫使用是用不到的，需要略為調整
  我們就以前篇文件的模組來做示範囉！

store/count.js 內容如下：

export default {
  namespaced: true,
  state: {
    count: 0
  },
  mutations: {
    ADD_COUNT (state) {
      state.count += 1
    }
  },
  actions: {
    updateCount (context, status) {
      context.commit('ADD_COUNT', status)
    }
  }
}

一樣與主檔案 store/index.js 綁定

import countModules from './count'

export default new Vuex.Store({
  modules: {
    countModules
  }
})

那在Vue元件中要如何使用帶命名的空間模組count的actions呢？
只要將命名模組的名稱插入就可以囉。
原本this.$store.dispatch('updateCount')
變成：

export default {
  methods: {
    updateCount () {
      this.$store.dispatch('countModules/updateCount')
    }
  },
}

• 如果要在帶命名空間模組中使用全域內容呢？
  就讓我們直接用範例來看吧，以下範例是假設我們有一個帶命名空間模組moduleA。

getters 部分：
全域內容的 rootState 和 rootGetters 會作為第三和第四參數傳入 getter，如以下範例，使用rootGetters 可以得到全域的 someOtherGetter，沒有使用的話就是得到此模組 moduleA 自己本身的 someOtherGetter

export default {
  namespaced: true,
  getters: {
    someGetter (state, getters, rootState, rootGetters) {
      getters.someOtherGetter // -> 'moduleA/someOtherGetter'
      rootGetters.someOtherGetter // -> 'someOtherGetter'
    },
    someOtherGetter: state => { ... }
  },
}

actions 部分：
全域內容的 rootState 和 rootGetters 上面提過就不提囉，比較特別的是 dispatch 或 commit，若需要在全局命名空間內分發 action 或提交 mutation，將 { root: true } 作為第三參數傳給 dispatch 或 commit 即可。

export default {
  namespaced: true,
  actions: {
    someAction ({ dispatch, commit, getters, rootGetters }) {
      getters.someGetter // -> 'moduleA/someGetter'
      rootGetters.someGetter // -> 'someGetter'

      dispatch('someOtherAction') // -> 'moduleA/someOtherAction'
      dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

      commit('someMutation') // -> 'moduleA/someMutation'
      commit('someMutation', null, { root: true }) // -> 'someMutation'
    },
    someOtherAction (ctx, payload) { ... }
  }
}

結語

今天我們對模組有了更深一些的認識啦！非常開心，可喜可賀！
明天我們再來補充一些些細節的東西囉！